<template>
	<view>
		<!-- <nav-bar isBack title="发布评价"></nav-bar> -->
		<nav-bars  bgColor="#fff" fontColor="#000" title="发布评价"></nav-bars>
		<view class="RateView">
			<view class="RateTitle">
				<text class="RateText">{{name}}</text>
				<u-icon name="arrow-right" color="#0A0605" size="26"></u-icon>
			</view>
			<view class="RateItem">
				<text class="RateItemText">综合评星</text>
				<u-rate size="40" active-color="#FFD425" inactive-color="#E6E6E6" inactive-icon="star-fill"
					v-model="value1" gutter="20"></u-rate>
				<text class="RateChange">{{valueChangeOne(value1)}}</text>
			</view>
			<view class="RateItem">
				<text class="RateItemText">设计方案</text>
				<u-rate size="40" active-color="#FFD425" inactive-color="#E6E6E6" inactive-icon="star-fill"
					v-model="value2" gutter="20"></u-rate>
				<text class="RateChange">{{valueChangeOne(value2)}}</text>
			</view>
			<view class="RateItem">
				<text class="RateItemText">沟通能力</text>
				<u-rate size="40" active-color="#FFD425" inactive-color="#E6E6E6" inactive-icon="star-fill"
					v-model="value3" gutter="20"></u-rate>
				<text class="RateChange">{{valueChangeOne(value3)}}</text>
			</view>
			<view class="RateItem">
				<text class="RateItemText">服务态度</text>
				<u-rate size="40" active-color="#FFD425" inactive-color="#E6E6E6" inactive-icon="star-fill"
					v-model="value4" gutter="20"></u-rate>
				<text class="RateChange">{{valueChangeOne(value4)}}</text>
			</view>
			<view class="RateItem">
				<text class="RateItemText">预算控制</text>
				<u-rate size="40" active-color="#FFD425" inactive-color="#E6E6E6" inactive-icon="star-fill"
					v-model="value5" gutter="20"></u-rate>
				<text class="RateChange">{{valueChangeOne(value5)}}</text>
			</view>
		</view>

		<view class="evalPublish">
			<view class="pubContent">
				<textarea value="" v-model="content" placeholder-class="placeStyle"
					placeholder="说说你的使用感受，为更多小伙伴购买提供参考~" />

				<view class="imgWrap" v-if="type == 1">
					<view class="imgBox" v-for="(item,index) in imgList" :key="index"  v-if="item.type=='image'">
						<image :src="item.path" mode=""></image>
						<image style="position: absolute;top: 0;right: 0;width: 40rpx;height: 40rpx;"
							:src="`${baseImg}/static/constr/remove.png`" mode="" @click="removeImg(index)"></image>
					</view>
					<view class="img">
						<image :src="`${baseImg}/static/onePlusN/addImg.png`" mode="" @click="uploadImg"></image>
						照片
					</view>
				</view>
				<view class="imgWrap" v-if="type ==2">
					<view class="imgBox" v-for="(item,index) in imgList" :key="index" v-if="item.type=='video'">
						<!-- <image :src="item.path" mode=""></image> -->
						<video style="	width: 164rpx;height: 164rpx;" :show-center-play-btn="false" :src="item.path"
							@pause="stopVideo" controls @fullscreenchange="openBig" play-btn-position="center"></video>
						<image style="position: absolute;top: 0;right: 0;width: 40rpx;height: 40rpx;"
							:src="`${baseImg}/static/constr/remove.png`" mode="" @click="removeImg(index)"></image>
					</view>
					<view class="img">
						<image :src="`${baseImg}/static/onePlusN/addImg.png`" mode="" @click="uploadImg"></image>
						视频
					</view>
				</view>
				<view style="display: flex;align-items: center;font-size: 28rpx;padding: 20rpx 0;">
					上传视频：
					<u-switch size="40" @change="changeType" v-model="TypeChecked"></u-switch>
				</view>
				<view class="toselect">
					<u-checkbox-group active-color="#C3AB7C">
						<u-checkbox v-model="checked" shape="circle">匿名提交</u-checkbox>
					</u-checkbox-group>
					<span>您的用户昵称和头像将不会对外展示</span>
				</view>
			</view>
			<view class="btn">
				<button type="default" @click="gitData">发布</button>
			</view>
		</view>
	</view>
</template>
<script>
	// import navBar from '@/components/navBar/navBar.vue';
	import URL from '@/config/url.js'
	import service_design from '@/service/design'
	export default {
		name: 'add',
		components: {
			// navBar
		},
		data() {
			return {
				baseImg: 'http://manager.ryz1620.com',
				checked: false,
				// estate_id:null,
				decoration_id:'',
				designer_id:'',
				order_id:'',
				comment_type:'',//评论类型(1设计师,2装企)
				name: '',
				content: '',
				value1: 0, //综合评星
				value2: 0, //设计方案
				value3: 0, //沟通能力
				value4: 0, //服务态度
				value5: 0, //预算控制
				imgList: [],
				type: 1,
				TypeChecked: false,
			};
		},
		onLoad(options) {
			this.$utils.getUrl()
			// pages_design/pages/design/evaluate/add
			console.log(options);
			this.name = options.name
			this.decoration_id = options.decorationId?options.decorationId:0;
			this.designer_id = options.designerId?options.designerId:0;
			this.order_id = options.orderId
			this.comment_type = options.designerId?1:2;
		},
		computed: {},
		created() {},
		mounted() {},
		methods: {
			changeType(e) {
				// console.log(e);
				this.type = e == true ? 2 : 1
			},
			valueChangeOne(star) {
				let text = ''
				switch (star) {
					case 0:
						text = ''
						break;
					case 1:
						text = '很差'
						break;
					case 2:
						text = '差'
						break;
					case 3:
						text = '一般'
						break;
					case 4:
						text = '好'
						break;
					case 5:
						text = '非常好'
						break;
						// default:
				}
				return text
			},
			gitData() {
				var that = this
				let arr = []
				this.imgList.map(item => {
					arr.push(item.id)
				})
				if (!arr.length) {
					this.type = 0
					// uni.showToast({
					// 	title: this.type == 0 ? '请上传图片' : '请上传视频',
					// 	icon: 'none'
					// })
					// return
				}
				if(this.value1==0 || this.value2==0 || this.value3==0 || this.value4==0 || this.value5==0){
					uni.showToast({
						title:'请完善评分',
						icon:'none'
					})
					return
				}
				let data = {
					order_id:that.order_id,
					comment_type:that.comment_type,
					designer_id: that.designer_id, //设计师ID
					decoration_id:that.decoration_id,
					content: that.content, //评价内容
					type: that.type, //(0图片,1视频)
					media: arr.join(','), //媒体
					overall_score: that.value1, //综合评星
					design_score: that.value2, //设计方案
					service_score: that.value4, //服务评分
					communicate_score: that.value3, //沟通能力
					budget_score: that.value5, //预算控制
					is_anonymous: that.checked == false ? 0 : 1, //是否匿名(0否,1是)
				}
				service_design.DesignComment(data)
					.then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '评价成功',
								icon: 'success',
								duration: 2000
							})
							this.imgList = []
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							},2000)
							
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})

			},
			//移除图片
			removeImg(index) {
				this.imgList.splice(index, 1)
			},
			uploadImg() {
				let that = this
				if (this.type == 1) {
					uni.chooseImage({
						count: 1,
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: URL.ENTER_UPLOAD_IMAGE,
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									uni.showLoading({
										title: '上传中'
									})
									console.log(uploadFileRes.data);
									let data = JSON.parse(uploadFileRes.data)
									if (data.code == 1) {
										console.log(data, '图片数据')
										that.imgList.push({
											path: data.data.url,
											id: data.data.id,
											type:'image'
										})
										console.log(that.imgList)
										uni.showToast({
											title: '上传成功',
											icon: 'success'
										})
									} else {
										uni.showToast({
											title: data.msg,
											icon: 'none'
										})
									}
									setTimeout(function() {
										uni.hideLoading()
									}, 500)
								}
							});
						}
					});
				} else {
					uni.chooseVideo({
						count: 1,
						sourceType: ['camera', 'album'],
						success: res => {
							const tempFilePaths = res.tempFilePath;
							console.log(tempFilePaths)
							uni.uploadFile({
								url: URL.ENTER_UPLOAD_IMAGE,
								filePath: tempFilePaths,
								name: 'file',
								success: (uploadFileRes) => {
									uni.showLoading({
										title: '上传中'
									})
									console.log(uploadFileRes.data);
									let data = JSON.parse(uploadFileRes.data)
									if (data.code == 1) {
										console.log(data)
										let obj = {
											path: data.data.url,
											id: data.data.id,
											type:'video'
										}
										this.imgList.push(obj)
										uni.showToast({
											title: '上传成功',
											icon: 'success'
										})
										console.log(this.imgList)
									} else {
										uni.showToast({
											title: data.msg,
											icon: 'none'
										})
									}
									setTimeout(function() {
										uni.hideLoading()
									}, 500)
								}
							});
						}
					});
				}
			},

		},
	};
</script>
<style lang="scss" scoped>
	.RateView {
		margin: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 28rpx;

		.RateTitle {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.RateText {
				font-size: 28rpx;
				font-weight: 600;
				color: #0A0605;
				margin-right: 10rpx;
			}
		}

		.RateItem {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;

			.RateChange {
				margin-left: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFCE0D;
			}

			.RateItemText {
				font-size: 28rpx;
				font-weight: 400;
				color: #0A0605;
				margin-right: 20rpx;
			}
		}
	}

	.evalPublish {
		border-radius: 16rpx;
		padding-bottom: 100rpx;

		.pubContent {
			width: 702rpx;
			// height: 606rpx;
			background-color: #fff;
			margin: 24rpx auto;
			padding: 40rpx 28rpx;

			textarea {
				width: 100%;
			}

			.placeStyle {
				font: 400 26rpx/40rpx PingFang SC;
				color: #A0A0A0;
			}

			.imgWrap {
				display: flex;
				flex-flow: wrap;
				align-items: center;

				.imgBox {
					width: 164rpx;
					height: 164rpx;
					display: flex;
					border-radius: 4rpx;
					margin-right: 5rpx;
					position: relative;
					margin-bottom:8rpx;

					image {
						width: 164rpx;
						height: 164rpx;
						border-radius: 4rpx;
					}
				}

				.img {
					width: 164rpx;
					height: 164rpx;
					border-radius: 4rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-color: #F6F7FB;
					font: 400 18rpx/20rpx;
					color: #A0A0A0;

					image {
						width: 56rpx;
						height: 56rpx;
						border-radius: 4rpx;
					}
				}
			}

			.toselect {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;
				font: 400 26rpx/40rpx PingFang SC;
				color: #505050;

				span {
					font: 400 24rpx/36rpx PingFang SC;
					color: #A0A0A0;
				}
			}
		}

		// 发表按钮
		.btn {
			width: 100%;
			height: 108rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			height: calc(108rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			height: calc(108rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

			button {
				width: 520rpx;
				height: 88rpx;
				margin: 10rpx auto;
				background-color: #C3AB7C;
				border-radius: 44rpx;
				font: 600 32rpx/88rpx PingFang SC;
				color: #fff;
			}
		}
	}
</style>
